<template>
  <div class="container">

    
    <!-- 筛选条件 - 单选形式 -->
    <div class="filter-section">
      <div class="filter-group">
        <div class="filter-label">技能</div>
        <div class="filter-options">
          <radio-group @change="onSkillChange">
            <div class="option-row" v-for="(item, index) in chunk(skillOptions, 2)" :key="index">
              <label class="radio-item" v-for="option in item" :key="option.value">
                <radio :value="option.value" :checked="option.value === selected.skill">{{ option.label }}</radio>
              </label>
            </div>
          </radio-group>
        </div>
      </div>
      
      <div class="filter-group">
        <div class="filter-label">经验</div>
        <div class="filter-options">
          <radio-group @change="onExperienceChange">
            <div class="option-row" v-for="(item, index) in chunk(experienceOptions, 2)" :key="index">
              <label class="radio-item" v-for="option in item" :key="option.value">
                <radio :value="option.value" :checked="option.value === selected.experience">{{ option.label }}</radio>
              </label>
            </div>
          </radio-group>
        </div>
      </div>
      
      <div class="filter-group">
        <div class="filter-label">教育背景</div>
        <div class="filter-options">
          <radio-group @change="onEducationChange">
            <div class="option-row" v-for="(item, index) in chunk(educationOptions, 2)" :key="index">
              <label class="radio-item" v-for="option in item" :key="option.value">
                <radio :value="option.value" :checked="option.value === selected.education">{{ option.label }}</radio>
              </label>
            </div>
          </radio-group>
        </div>
      </div>
    </div>
    
    <!-- 薪资区间选择 -->
    <div class="salary-section">
      <div class="filter-label">每月可支配薪资</div>
      <div class="salary-slider-container">
        <button class="adjust-btn decrease-btn" @click="decreaseSalary">-</button>
        <div class="salary-slider">
          <slider :min="0" :max="50000" :step="200" :value="salaryValue" @change="onSalaryChange" show-value></slider>
        </div>
        <button class="adjust-btn increase-btn" @click="increaseSalary">+</button>
      </div>
    </div>
    
    <!-- 底部按钮 -->
    <div class="bottom-buttons">
      <div class="cancel-btn" @click="cancel">取消</div>
      <div class="confirm-btn" @click="confirm">确定</div>
    </div>
  </div>
</template>

<script>
import { recommendTalents } from '@/api/api.js';

export default {
  data() {
    return {
      // 选中的值
      selected: {
        skill: '1',
        experience: '1',
        education: '1'
      },
      // 技能选项
      skillOptions: [
        { value: '1', label: '不限技能' },
        { value: '2', label: '未做过项目' },
        { value: '3', label: '做过1-3个项目' },
        { value: '4', label: '做过4-6个项目' },
        { value: '5', label: '做过7-10个项目' },
        { value: '6', label: '做过10+项目' }
      ],
      // 经验选项
      experienceOptions: [
        { value: '1', label: '不限经验' },
        { value: '2', label: '一年以内' },
        { value: '3', label: '一年经验' },
        { value: '4', label: '二年经验' },
        { value: '5', label: '三年经验' },
        { value: '6', label: '三年到五年' },
        { value: '7', label: '五年到八年' },
        { value: '8', label: '八年到十年' },
        { value: '9', label: '十年以上' }
      ],
      // 教育背景选项
      educationOptions: [
        { value: '1', label: '不限学历' },
        { value: '2', label: '大专以下' },
        { value: '3', label: '大学专科' },
        { value: '4', label: '大学本科' },
        { value: '5', label: '硕士学位' },
        { value: '6', label: '博士学位' }
      ],
      // 薪资值
      salaryValue: 0
    }
  },
  methods: {
    // 将数组分成每组n个元素
    chunk(arr, n) {
      return arr.reduce((acc, item, i) => {
        if (i % n === 0) acc.push([]);
        acc[acc.length - 1].push(item);
        return acc;
      }, []);
    },
    // 技能变化处理
    onSkillChange(e) {
      if (e.detail && e.detail.value) {
        this.selected.skill = e.detail.value;
      }
    },
    // 经验变化处理
    onExperienceChange(e) {
      if (e.detail && e.detail.value) {
        this.selected.experience = e.detail.value;
      }
    },
    // 教育背景变化处理
    onEducationChange(e) {
      if (e.detail && e.detail.value) {
        this.selected.education = e.detail.value;
      }
    },
    // 薪资变化处理
    onSalaryChange(e) {
      if (e.detail && e.detail.value !== undefined) {
        this.salaryValue = e.detail.value;
      }
    },
    // 增加薪资
    increaseSalary() {
      const maxValue = 50000;
      const step = 200;
      if (this.salaryValue < maxValue) {
        this.salaryValue = Math.min(this.salaryValue + step, maxValue);
      }
    },
    // 减少薪资
    decreaseSalary() {
      const minValue = 0;
      const step = 200;
      if (this.salaryValue > minValue) {
        this.salaryValue = Math.max(this.salaryValue - step, minValue);
      }
    },
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },
    // 取消筛选
    cancel() {
      this.selected = {
        skill: '1',
        experience: '1',
        education: '1'
      };
      this.salaryValue = 0;
    },
    // 确认筛选
    async confirm() {
      try {
        const res = await recommendTalents({
          skillLevel: parseInt(this.selected.skill),
          experienceLevel: parseInt(this.selected.experience),
          educationLevel: parseInt(this.selected.education),
          maxSalary: this.salaryValue
        });
        
        // 处理并存储结果
        const transformedData = res.data.map(item => ({
          id: item.candidateId,
          name: item.candidateName,
          avatar: item.avatar || '/static/avatar-default.png',
          match: item.matchPercentage
        }));
        
        // 存储到全局变量
        getApp().globalData.recommendations = transformedData;
        
        // 跳转到结果页面
        uni.navigateTo({
          url: '/pages/index/business/return'
        });
        
      } catch (error) {
        uni.showToast({
          title: '获取推荐失败',
          icon: 'none'
        });
        console.error('推荐失败:', error);
      }
    }
  }
}
</script>

<style>
body {
  margin: 0;
  padding: 0;
  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
  background-color: #f5f5f5;
  color: #333;
  max-width: 414px;
  margin: 0 auto;
}

.container {
  min-height: 90vh;
  position: relative;
  padding-bottom: 70px; /* 给底部按钮留空间 */
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background-color: #333;
  color: white;
  position: sticky;
  top: 0;
  z-index: 10;
}

.title {
  flex: 1;
  text-align: center;
  font-weight: bold;
  font-size: 18px;
}

.back-btn {
  font-size: 24px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.filter-section {
  padding: 15px;
  background-color: white;
  margin: 10px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.filter-group {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.filter-group:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.filter-label {
  color: #333;
  margin-bottom: 12px;
  font-weight: bold;
  font-size: 16px;
}

.filter-options {
  display: flex;
  flex-direction: column;
}

.option-row {
  display: flex;
  margin-bottom: 10px;
}

.radio-item {
  flex: 1;
  margin-right: 15px;
  display: flex;
  align-items: center;
}

radio {
  transform: scale(0.9);
  margin-right: 5px;
}

.salary-section {
  padding: 15px;
  background-color: white;
  margin: 10px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.salary-slider-container {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.adjust-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: bold;
  border: none;
}

.decrease-btn {
  background: #f0f0f0;
  color: #666;
}

.increase-btn {
  background: #4CAF50;
  color: white;
}

.salary-slider {
  flex: 1;
  margin: 0 12px;
}

.bottom-buttons {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
  padding: 12px 15px;
  border-top: 1px solid #eee;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
}

.cancel-btn, .confirm-btn {
  flex: 1;
  text-align: center;
  padding: 14px 0;
  font-size: 16px;
  font-weight: 500;
  border-radius: 6px;
  margin: 0 8px;
}

.cancel-btn {
  background: white;
  color: #333;
  border: 1px solid #ddd;
}

.confirm-btn {
  background: #4CAF50;
  color: white;
  border: 1px solid #4CAF50;
}
</style>
